<!--  -->
<template>
  <div class=''>
    <el-dialog :width="width" :title="title" @close="$emit('update:dialogTableVisible', false)" :visible.sync="visible" :show="dialogTableVisible">
      <!-- <vxe-toolbar>
        <template v-slot:tools>
          <vxe-button type="text" icon="vxe-icon--menu">
            <template v-slot:tools>
              <el-transfer v-model="value" :data="data"></el-transfer>
            </template>
          </vxe-button>
        </template>
      </vxe-toolbar> -->

      <!-- <template v-slot:tools>
          <vxe-button type="text" icon="vxe-icon--menu">
            <template v-slot:dropdowns>
              <el-transfer v-model="value" :data="data"></el-transfer>
            </template>
          </vxe-button>
        </template> -->
      <vxe-grid highlight-hover-row stripe border resizable :loading="loading" :columns="tableColumn" :toolbar="tableToolbar" :data="tableData" @cell-click="cellClickEvent"></vxe-grid>
      <pagination v-show="tablePage.total>0" :total="tablePage.total" :page.sync="tablePage.pageIndex" :limit.sync="tablePage.pageSize" @pagination="getPage" />
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Pagination from "@/components/Pagination";
import { getRoomInfo } from "@/api/table";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Pagination },
  data() {
    //这里存放数据
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `资产列表 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      width: "75%",
      visible: this.dialogTableVisible,
      tableToolbar: {
        // refresh: true,
        setting: true
      },
      data: generateData(),
      value: [2, 3]
    };
  },
  props: {
    dialogTableVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "资产列表"
    },
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    tableColumn: {
      type: Array,
      default() {
        return [];
      }
    },
    tablePage: {
      type: Object,
      default() {
        return {
          total: 0,
          pageIndex: 1,
          pageSize: 10
        };
      }
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    dialogTableVisible() {
      this.visible = this.dialogTableVisible;
    },
    tableData: {
      handler(newValue, oldValue) {
        this.tableData = newValue;
      },
      deep: true
    },
    tableColumn: {
      handler(newValue, oldValue) {
        this.tableColumn = newValue;
      },
      deep: true
    }
  },
  //方法集合
  methods: {
    cellClickEvent({ row, rowIndex, column, columnIndex }, event) {
      console.log(`单元格点击`, row);
      if (this.title === "资产列表") {
        this.$router.push({
          name: "detail",
          query: { roomGuid: row.roomGuid }
        });
      } else {
        this.$router.push({
          name: "contract",
          query: { chartGuid: row.chartGuid }
        });
      }
    },
    getPage({ page, limit }) {
      this.$emit("getPage", { page, limit });
      console.log("page", page, limit);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.fetchData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
/deep/ tr:hover {
  cursor: pointer;
}
/deep/ th .vxe-cell {
  text-align: center;
}
</style>